<template>
  <div>
    <el-page-header
        style="background-color: #0095d7;color: white;
                    line-height: 60px"
        @back="goBack" content="添加书籍">
    </el-page-header>
    <!--创建一个card组件里面添加一个表单组件-->
    <el-card style="width: 600px;height: 700px;margin:0 auto">
      <el-form label-width="80px">
        <el-form-item label="书籍标题">
          <el-input v-model="p.title" type="text" ></el-input>
        </el-form-item>
        <el-form-item label="书籍价格">
          <el-input v-model="p.price" type="text" ></el-input>
        </el-form-item>
        <el-form-item label="书籍原价">
          <el-input v-model="p.oldPrice" type="text" ></el-input>
        </el-form-item>
        <el-form-item label="书籍销量">
          <el-input v-model="p.saleCount" type="text" ></el-input>
        </el-form-item>
        <el-form-item label="书籍库存">
          <el-input v-model="p.num" type="text" ></el-input>
        </el-form-item>
        <el-form-item label="书籍分类">
          <!--label是显示的内容 value是选中后提交的值-->
          <el-select v-model="p.categoryId">
            <el-option v-for="c in arr"
                       :label="c.name" :value="c.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书籍图片">
          <el-upload
              action="/upload"
              name="pic"
              limit="1"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="insert()">添加书籍</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "InsertBook",
  data: function () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      p:{
        title:"",
        url:"",
        price:"",
        oldPrice:"",
        saleCount:"",
        num:"",
        categoryId:""
      },
      arr:[]
    }
  },
  methods: {
    goBack() {
      history.back();//返回上一页面
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);

      axios.get("/remove?url=" + v.p.url).then(function (response) {
        v.$message("删除成功!");
        //删除后url 应该清空  代表没有选择上传的图片
        v.p.url = "";
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      //file.response得到服务器上传成功后相应的图片路径
      v.p.url = file.response;
    },
    insert() {
      if (v.p.url == "") {
        v.$message("请选择上传的图片!");
        return;
      }
      //发出添加商品请求
      axios.post("/book/insert", v.p).then(function () {
        location.href = "/InsertBookView.vue";
      })
    }
  }
</script>

<style scoped>

</style>